<template>
  <div class="right-container">
    <div class="screen-container">
      <!-- 搜索框 -->
      <search-form
        :data="filterData"
        :field-list="filterInfo.fieldList"
        :list-type-info="filterInfo.listTypeInfo"
        @handleSearch="handleQuery"
        @handleReset="resetQuery"
        @handleEvent="handleEvent"
      />
    </div>
    <el-row :gutter="10">
      <el-col :span="1.5">
        <!-- <el-button
          type="primary"
          icon="el-icon-download"
          :disabled="ids.length == 0"
          size="mini"
          @click="handleExport"
        >导出
        </el-button> -->
        <el-button
          icon="el-icon-delete"
          :disabled="ids.length == 0"
          size="mini"
          @click="handleDel"
        >批量删除
        </el-button>
      </el-col>
    </el-row>
    <HkTable
      :loading="loading"
      :table-data="tableList"
      :table-columns="tableFieldList"
      :show-pag="true"
      :is-need-index="true"
      :selection="true"
      :operate="true"
      :show-index="true"
      :table-height="80"
      :query-params="queryParams"
      rowkey="id"
      :total="total"
      @changePage="changePage"
      @handleSelectionChange="handleSelectionChange"
    >
      <!--   日志内容   -->
      <template #logData="scope">
        <!-- <span>{{ scope.row.row.logData }}</span> -->
        <el-tooltip placement="top" effect="dark">
          <div slot="content">{{ scope.row.row.logData }}</div>
          <div class="table-cell">{{ scope.row.row.logData }}</div>
        </el-tooltip>
      </template>
      <template #operate="scope">
        <el-button type="text" @click="handleDel(scope.row)">删除</el-button>
        <!-- <el-button type="text" @click="handleExport(scope.row)">导出</el-button> -->
      </template>
    </HkTable>
  </div>
</template>

<script>
import SearchForm from '@/components/HkSearchform'
import HkTable from '@/components/Hk-Table'
import { getTableList, deleteLogUnknown, logUnknownDownLoad } from '@/api/milkyway/unparsedLogs.js'

export default {
  components: { SearchForm, HkTable },
  props: {
    checkList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      // 新增框是否 可见
      open: false,
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 查询参数
      queryParams: {
        keyWord: '',
        searchType: '',
        startTime: '',
        endTime: '',
        size: 10,
        current: 1,
        ips: []
      },
      filterData: {},
      // 查询
      filterInfo: {
        fieldList: [
          {
            label: '关键字',
            type: 'input',
            field: 'keyWord',
            placeholder: '日志发送IP地址/接入数据源/日志内容'
          },
          { label: '时间', type: 'select', field: 'searchType', list: 'timeList' },
          { label: '', type: 'dateRange', field: 'timeRange', hidden: true }
        ],
        listTypeInfo: {
          timeList: [
            { label: '近一日', value: '1' },
            { label: '近一周', value: '2' },
            {
              label: '近一月',
              value: '3'
            },
            { label: '自定义', value: 'custom' }
          ]
        }
      },
      tableList: [],
      tableFieldList: [
        { label: '日志发送IP地址', param: 'sendIp', width: '180' },
        { label: '接入数据源', param: 'dataSourceNames', width: '200' },
        { label: '日志内容', param: 'logData', type: 'slot', showToolTip: true },
        { label: '接收时间', param: 'operationTime', width: '200' },
        { label: '解析失败原因', param: 'failureReason', width: '200' }
      ],
      ids: []
    }
  },
  watch: {
    checkList(newValue, oldValue) {
      this.queryParams.ips = newValue
      this.getList()
    }
  },
  created() {
    this.getList()
  },

  methods: {
    /** 查询角色列表 */
    getList() {
      this.loading = false
      this.queryParams.scrollToTop = true
      getTableList(this.queryParams).then((res) => {
        this.tableList = res.list
        this.total = res.total
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    },
    /** handleEvent  */
    handleEvent(obj) {
      if (obj.field == 'searchType') {
        if (obj.value == 'custom') {
          this.filterInfo.fieldList.forEach((i) => {
            if (i.type == 'dateRange') {
              i.hidden = false
            }
          })
        } else {
          this.filterInfo.fieldList.forEach((i) => {
            if (i.type == 'dateRange') {
              i.hidden = true
            }
          })
        }
      }
    },
    /** 搜索按钮操作 */
    handleQuery(value) {
      this.queryParams.current = 1
      this.queryParams.keyWord = value?.keyWord
      this.queryParams.searchType = value?.searchType
      if (value?.searchType !== 'custom') {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      } else {
        this.queryParams.startTime = value?.timeRange ? value?.timeRange[0] : ''
        this.queryParams.endTime = value?.timeRange ? value?.timeRange[1] : ''
      }

      this.getList()
    },
    /** 重置按钮*/
    resetQuery() {
      this.queryParams = {
        keyWord: '',
        searchType: '',
        startTime: '',
        endTime: '',
        size: 10,
        current: 1,
        ips: []
      }
      this.getList()
    },
    /** handleSelectionChange
     * */
    handleSelectionChange(val) {
      this.ids = val.map((i) => {
        return i.id
      })
    },
    /** 分页*/
    changePage(value) {
      this.getList()
    },
    /** 删除 */
    handleDel(row) {
      if (row?.row?.id) {
        this.ids = [row.row.id]
      }
      this.$modal
        .confirm('是否确认删除所选数据项？')
        .then(() => {
          return deleteLogUnknown({ ids: this.ids.join(',') })
        })
        .then(
          (res) => {
            /*           this.queryParams.current = 1
            const _this = this
            setTimeout(function() {
              _this.getList()
            }, 500) */
          },
          (error) => {}
        )
    },
    /** 导出 */
    handleExport(row) {
      if (row?.row?.id) {
        this.ids = [row.row.id]
      }
      logUnknownDownLoad({ params: { ids: this.ids.join(',') }, filename: `未解析日志_${new Date().getTime()}.xlsx` })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-range-separator {
  line-height: 30px;
}
.right-container {
  display: flex;
  flex-direction: column;
  .targetTable {
    flex: 1;
    // overflow-y: auto;
  }
}
.app-container {
  padding: 0;
}
.table-cell {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iconi {
  width: 16px;
  height: 16px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  line-height: 16px;
  color: white;

  &::before {
    font-size: 10px;
    font-weight: 600;
  }
}

::v-deep .screen-container {
  .el-input,
  .el-select {
    width: 270px;
  }
}
</style>
